<template>
  <view class="im">
    <view class="im-header">
      <view class="im-header-left">
        <view class="im-header-left-box">
          <image
            src="@/static/im/01.png"
            style="width: 64rpx; height: 64rpx"
            mode="scaleToFill"
          />
          <!-- <Icon /> -->
          <text>{{ title }}</text>
        </view>
      </view>
      <view class="im-header-right">{{ time }}</view>
    </view>
    <view class="im-body"> {{ content }} </view>
    <view class="im-details">
      <text class="im-details-text">查看详情</text>
      <tui-icon name="arrowright" :size="18"></tui-icon>
    </view>
  </view>
</template>

<script lang="js" setup>
// import Icon from './icon.vue'
defineProps({
  title: String,
  time: String,
  content: String,
  status: '挂号成功' | '消息通知' | '缴费成功通知' | '缴费通知'
})
</script>

<style scoped lang="scss">
.im {
  color: rgba(51, 51, 51, 1);
  padding: 32rpx 16rpx;
  border-radius: 16px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 16rpx;
  &-header {
    display: flex;
    align-items: center;
    &-left {
      flex: 1;

      &-box {
        display: flex;
        align-items: center;

        text {
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
          font-weight: 700;
          line-height: 36rpx;
          padding-left: 8rpx;
        }
      }
    }

    &-right {
      color: rgba(153, 153, 153, 1);
      font-size: 24rpx;
      font-weight: 400;
    }
  }
  &-body {
    font-size: 24rpx;
    font-weight: 400;
    padding: 16rpx 0;
    color: rgba(153, 153, 153, 1);
  }
  &-details {
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16rpx;
    border-top: 1px solid rgba(230, 230, 230, 1);
  }
}
</style>
